<h2 *ngIf="show">是否显示</h2>
<input type="button" value="切换" (click)="click()">

<input type="number" [value]="fenshu" (input)="input($event)">

<p *ngIf=" fenshu < 60">不及格</p>
<p *ngIf=" fenshu >= 60 && fenshu < 70">及格</p>
<p *ngIf=" fenshu >= 70 && fenshu < 80">中等</p>
<p *ngIf=" fenshu >= 80 && fenshu < 90">良好</p>
<p *ngIf=" fenshu >= 90">优秀</p>

<div [ngSwitch]="cl()">
    <p *ngSwitchCase="6">6</p>
    <p *ngSwitchCase="7">7</p>
    <p *ngSwitchCase="8">8</p>
    <p *ngSwitchCase="9">9</p>
    <p *ngSwitchCase="10">10</p>
    <p *ngSwitchDefault>0</p>
</div>

<p [style.background-color]="'red'">style属性</p>
<p [ngStyle]="{'background-color':'red','color':'white'}">ngStyle</p>
<form action="">
    <h3>动态ngStyle</h3>
    <div class="form-group">
        <label for="iptColor">color</label>
        <input type="text" class="form-control" id="iptColor" aria-describedby="color" #colorinput>
    </div>
    <div class="form-group">
        <label for="iptTextSize">font-size</label>
        <input type="number" class="form-control" id="iptTextSize" aria-describedby="font size" #fontinput>
    </div>
    <a class="btn btn-primary" href="#" role="button" (click)="set(colorinput.value,fontinput.value)">setting</a>
</form>

<div>
    <span [ngStyle]="{color:'red'}" [style.font-size]="fontSize">redredred</span>
</div>
<div [style.background-color]="color" style="color: white;">
    {{color}}背景色
</div>
<div [ngStyle]="{'color':'white','background-color':color,'font-size':fontSize + 'px'}">
    ngStyle动态修改
</div>

<h3>使用ngClass</h3>
<div [ngClass]="{bordered:isB,pink:isB,round:isB}" (click)="isclick()"> 有边框</div>
<div [ngClass]="obj"> 采用json</div>
<div [ngClass]="{bordered:!isB,pink:!isB}" (click)="isclick()"> 无边框</div>
<div [ngClass]="['bordered','pink','round']">另一种方式</div>
<a class="btn btn-primary" href="#" role="button" (click)="isclick()">change</a>

<h3>使用ngFor指令</h3>
<ul>
    <li *ngFor='let city of city'>
        {{city}}
    </li>
</ul>


<h4>表格案例</h4>
<table class="table">
    <thead class="thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">名字</th>
            <th scope="col">年龄</th>
            <th scope="col">城市</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let p of people;let i=index'>
            <td scope="row">{{i+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.city}}</td>
        </tr>
    </tbody>
</table>
<h4>表格案例2</h4>
<div *ngFor='let p of peopleByCity'>
    <h2>{{p.city}}</h2>
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">名字</th>
                <th scope="col">年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor='let p2 of p.people;let i=index'>
                <td scope="row">{{i+1}}</td>
                <td>{{p2.name}}</td>
                <td>{{p2.age}}</td>
            </tr>
        </tbody>
    </table>
</div>









<br><br><br>